<template>
  <div class="ruler-container">
    <div class="ruler h" :style="{ top: top + 'px' }">
      <ul class="scale">
        <li v-for="num in 40" :key="num">{{ num * 50 }}</li>
      </ul>
      <!-- <input type="range" min="1" max="10000" /> -->
      <ul class="line">
        <li class="tempLine" />
      </ul>
    </div>
    <div class="ruler v" :style="{ left: left + 'px' }">
      <ul class="scale vs">
        <li v-for="num in 40" :key="num">{{ (40 - num) * 50 }}</li>
      </ul>
      <!-- <input type="range" min="1" max="10000" /> -->
      <ul class="line">
        <li class="tempLine" />
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Ruler',
    props: {
      left: {
        type: Number,
        default: 0,
      },
      top: {
        type: Number,
        default: 0,
      },
    },
  }
</script>

<style scoped>
  .scale {
    list-style-type: none;
    position: absolute;
    left: 0px;
    top: 0;
    margin: 0;
    padding: 0;
    width: 2670px;
    height: 30px;
    overflow: hidden;
    white-space: nowrap;
    color: #b1b4b4;
    font-size: 0;
    text-shadow: 0px 1px 1px #000;
    -moz-user-select: none; /* 火狐 */
    -webkit-user-select: none; /* webkit浏览器 */
    -ms-user-select: none; /* IE10 */
    -khtml-user-select: none; /* 早期浏览器 */
    user-select: none;
  }

  .scale.vs {
    left: 50px;
  }

  .scale li {
    display: inline-block;
    width: 50px;
    text-align: right;
    padding-right: 2px;
    font-size: 11px;
    box-sizing: border-box;
  }

  .ruler {
    position: absolute;
    background-color: #303030;
    background-image: linear-gradient(
        90deg,
        #696969 0,
        #696969 2%,
        transparent 2%
      ),
      linear-gradient(180deg, #303030 50%, transparent 50%),
      linear-gradient(
        90deg,
        transparent 50%,
        #696969 50%,
        #696969 52%,
        transparent 52%
      ),
      linear-gradient(180deg, #303030 70%, transparent 70%),
      linear-gradient(
        90deg,
        transparent 10%,
        #696969 10%,
        #696969 12%,
        transparent 12%,
        transparent 20%,
        #696969 20%,
        #696969 22%,
        transparent 22%,
        transparent 30%,
        #696969 30%,
        #696969 32%,
        transparent 32%,
        transparent 40%,
        #696969 40%,
        #696969 42%,
        transparent 42%,
        transparent 60%,
        #696969 60%,
        #696969 62%,
        transparent 62%,
        transparent 70%,
        #696969 70%,
        #696969 72%,
        transparent 72%,
        transparent 80%,
        #696969 80%,
        #696969 82%,
        transparent 82%,
        transparent 90%,
        #696969 90%,
        #696969 92%,
        transparent 92%
      );
    background-size: 50px 30px;
    background-repeat: repeat-x;
    min-height: 30px;
    z-index: 100;
  }

  .ruler.v {
    position: absolute;
    left: 0;
    top: 30px;
    transform-origin: 0 0;
    height: 30px;
    width: 2000px;
    background-position: 0 100%;
    transform: rotate(-90deg) translateX(-100%);
    border-bottom: 1px solid #696969;
    overflow: hidden;
  }

  .ruler.h {
    left: 0;
    height: 30px;
    width: 2700px;
    border-left: 30px solid #535353;
    border-bottom: 1px solid #696969;
    background-position: 0 100%;
  }

  .ruler.h input[type='range']::-webkit-slider-thumb {
    transform: translateY(30px);
  }

  .ruler.h input[type='range']::-moz-range-thumb {
    transform: translateY(30px);
  }

  .ruler.h .line .tempLine {
    display: none;
    position: absolute;
    top: 30px;
    left: 50px;
    width: 1px;
    height: 3000px;
    background: #f00;
  }

  .ruler.h .line .dragLine {
    cursor: e-resize;
  }

  .ruler.h .line li {
    position: absolute;
    top: 30px;
    left: 10px;
    width: 1px;
    height: 3000px;
    background: #1ee5f7;
  }

  .ruler.v .scale li {
    text-align: left;
  }

  .ruler.v .line {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    height: 30px;
    width: 100%;
  }

  .ruler.v .line .tempLine {
    display: none;
    position: absolute;
    top: 30px;
    left: 50px;
    width: 1px;
    height: 3000px;
    background: #f00;
  }

  .ruler.v .line .dragLine {
    cursor: s-resize;
  }

  .ruler.v .line li {
    position: absolute;
    top: 30px;
    left: 10px;
    width: 1px;
    height: 3000px;
    background: #1ee5f7;
  }
</style>
